<template>
  <div>
    <el-row class="elrowl">
      <el-col :span="6">
        <i class="el-icon-user-solid"></i>
        <span class="name">{{ lname }}</span>
      </el-col>
      <el-col :span="9">
        <span class="desc">值班组长</span>
        <span class="name">{{ leader }}</span>
      </el-col>
      <el-col :span="9">
        <span class="desc">值班组员</span>
        <span class="name">{{ member }}</span>
      </el-col>
    </el-row>

    <div class="logo"></div>

    <el-row class="elrowr">
      <el-col :span="16">
        <span class="time">{{ time }}</span>
      </el-col>
      <el-col :span="8">
        <span class="temp">{{ temp }}</span>
        <span class="weather">{{ weather }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { weat } from "../utils/api";
export default {
  name: "t-nav",
  data() {
    return {
      lname: " 大洲镇",
      leader: "吕振兴",
      member: "周成宁",
      time: "",
      weather: "",
      temp: "",
    };
  },
  mounted() {
    this.time = this.localTime();
    setInterval(() => {
      this.time = this.localTime();
    }, 1000);
    let me = this;
    weat().then((res) => {
      if (res.data.status === 200) {
  
        me.temp = res.data.data.temp;
        me.weather = res.data.data.wetherStatus;
      }
    });
  },
  methods: {
    localTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      let day = date.getDate();
      day = day < 10 ? "0" + day : day;
      let hour = date.getHours();
      hour = hour < 10 ? "0" + hour : hour;
      let minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      let second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      let week = "星期" + "日一二三四五六".charAt(new Date().getDay());
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        "   " +
        hour +
        ":" +
        minute +
        ":" +
        second +
        " " +
        week
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.elrowl {
  width: 650px;
  height: 50px;
  float: left;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url("../assets/image/nav/navl.png");
  margin-top: 10px;
  line-height: 50px;
  padding-left: 15px;
}
.elrowr {
  width: 675px;
  height: 50px;
  float: right;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url("../assets/image/nav/navr.png");
  margin-top: 10px;
  line-height: 50px;
  padding-left: 15px;
}
.el-icon-user-solid {
  font-size: 30px;
  color: #fff;
}
.desc {
  color: #fff;
  font-size: 24px;
}
.name {
  color: #fedc85;
  font-size: 24px;
  margin-left: 20px;
}
.logo {
  width: 1744px;
  height: 75px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url("../assets/image/global/logo.png");
}
.time{
  margin-left: 30px;
}
.time,.temp,.weather{
  color: #fff;
  font-size: 24px;
  letter-spacing: 2px;
  padding-left: 30px;
}
</style>
